<template>
  <div class="grade-progress-box">
    <div class="grade-star-bg" @click="staRate($event)" ref="elememt">
      <div class="grade-star-gradual">
        <span class="progress" :style="{width: (rate*100) + '%'}"></span>
        <div class="grade-star-img"></div>
      </div>
    </div>
    <div class="grade-number">{{rate*10/2}}分</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rate: 0
    };
  },
  methods: {
    staRate(e) {
      let ox = e.offsetX;
      let boxWidth = this.$refs.elememt.offsetWidth;
      this.rate = (ox / boxWidth).toFixed(1);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../style/mixin";
.grade-progress-box:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}
.grade-progress-box {
  margin-top: 0.4rem;
  padding: 5%;
  overflow: hidden;
  position: relative;
  padding: 0 5%;
}
.grade-star-bg {
  @include wh(78%, 1.95rem);
  vertical-align: middle;
  overflow: hidden;
}

.grade-star-gradual {
  @include wh(100%, 1.95rem);
  -webkit-border-radius: 0.15rem;
  border-radius: 0.15rem;
  overflow: hidden;
  background: #e5e5e5;
  position: relative;
}
.grade-star-img {
  @include wh(100%, 100%);
  background-image: url(../assets/star.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}

.grade-star-gradual span.progress {
  width: 0;
  height: 100%;
  display: block;
  -webkit-border-radius: 0.15rem;
  border-radius: 0.15rem;
  -webkit-transition: width 1s ease-out;
  -o-transition: width 1s ease-out;
  transition: width 1s ease-out;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#fea94e),
    to(#f23f5c)
  );

  background: -o-linear-gradient(left, #fea94e, #f23f5c 100%);
  background: linear-gradient(to right, #fea94e, #f23f5c 100%);
  background: -webkit-linear-gradient(left, #fea94e, #f23f5c 100%);
}
.grade-number {
  width: 22%;
  height: 100%;
  vertical-align: middle;
  font-size: 0.8rem;
  margin-top: 0.45rem;
  position: absolute;
  right: 0;
  top: 0;
}
</style>